<script setup lang="ts">
import { ref } from "vue";
import type { TableColumnsType } from "ant-design-vue";

interface TeacherInfo {
  id: number;
  name: string;
  title: string;
  phone: string;
}

const teachers: TeacherInfo[] = [
  {
    id: 1,
    name: "张明",
    title: "宿舍管理主任",
    phone: "19715629702",
  },
  {
    id: 2,
    name: "李华",
    title: "维修部主管",
    phone: "19715629703",
  },
  {
    id: 3,
    name: "王芳",
    title: "生活指导员",
    phone: "19715629704",
  },
  {
    id: 4,
    name: "刘强",
    title: "安全主管",
    phone: "19715629705",
  },
];

const columns: TableColumnsType = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
    width: 150,
  },
  {
    title: "职位",
    dataIndex: "title",
    key: "title",
    width: 150,
  },
  {
    title: "联系电话",
    dataIndex: "phone",
    key: "phone",
    width: 200,
  },
  {
    title: "操作",
    key: "action",
    width: 120,
  },
];

const handleCall = (record: TeacherInfo) => {
  window.location.href = `tel:${record.phone}`;
};
</script>

<template>
  <div class="teacher-consult-container">
    <a-card title="教师咨询" class="main-card">
      <a-alert
        message="如需帮助，请直接联系相关老师"
        type="info"
        show-icon
        style="margin-bottom: 20px"
      />

      <a-table
        :columns="columns"
        :data-source="teachers"
        :pagination="false"
        class="custom-table"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-button type="primary" size="small" @click="handleCall(record)">
              拨打电话
            </a-button>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<style scoped>
.teacher-consult-container {
  padding: 24px;
}

.main-card {
  background: #fff;
  border-radius: 8px;
}

.main-card :deep(.ant-card-head) {
  border-bottom: 2px solid #f0f0f0;
  padding: 0 24px;
  min-height: 64px;
}

.custom-table {
  margin-top: 16px;
}

.custom-table :deep(.ant-table-thead > tr > th) {
  background-color: #fafafa;
  font-weight: 500;
  padding: 16px 24px;
}

.custom-table :deep(.ant-table-tbody > tr > td) {
  padding: 16px 24px;
}

.custom-table :deep(.ant-table-tbody > tr:hover > td) {
  background-color: #f5f5f5;
}

:deep(.ant-tag) {
  margin: 2px;
  padding: 2px 8px;
}

:deep(.ant-btn-primary) {
  background-color: #1890ff;
}

:deep(.ant-alert) {
  border-radius: 4px;
}

:deep(.ant-input-search) {
  border-radius: 4px;
}

:deep(.ant-table-pagination) {
  margin: 16px 0;
}
</style>
